# Component: Tags

Taxonomy container for categories and keywords

Utility Block

### BEM Anatomy

| Type      | Class Name         | Description                                                                                   |
| --------- | ------------------ | --------------------------------------------------------------------------------------------- |
| ==Block== | `.as-tags`         | The main wrapper. Manages the grouping and vertical clearance of the tag list.                |
| Element   | `__item`           | Individual tag wrapper. Modifiers distinguish between broad categories and specific keywords. |
| Modifier  | `__item--category` | Used for items utilizing the nodes/category icon logic.                                       |
| Modifier  | `__item--keyword`  | Used for standard keyword tags.                                                               |

### Taxonomy Logic

The component iterates through two separate collections: `Categories` (which receive a specific `fa-circle-nodes` icon) and `Keywords`. Both utilize the `TagButtonComponent` child atom for consistent button styling and navigation behavior.

##### Generated HTML

```html
<div class="as-tags custom-outer-class">
    <!-- Category Tag -->
    <div class="as-tags__item as-tags__item--category">
        <button class="btn btn-tag">
            <i class="fa-solid fa-circle-nodes"></i> Development
        </button>
    </div>

    <!-- Keyword Tag -->
    <div class="as-tags__item as-tags__item--keyword">
        <button class="btn btn-tag">
            <i class="fa-solid fa-tag"></i> Csharp
        </button>
    </div>
</div>
```

##### SCSS

```scss
.as-tags {
  // Provides separation from 
  // content following the tag cloud
  margin-bottom: 1.5rem;

  &__item {
    // Structural hooks for 
    // category vs keyword styling
    &--category {}
    &--keyword {}
  }
}
```
